<script>
import { useRoute } from "vue-router";
import { public_status } from "../store/public_status";
import { useStore } from "../store/index";
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    public_status().display = false;

    // # 路由配置
    let route = useRoute();

    let data = reactive({
      userOrder: null,
    });

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId];

    // # 根据id找到对应订单
    let id = route.query.id;
    let index = userData.order.findIndex((item) => item.orderId == id);
    let userOrder = userData.order[index]; // # 订单信息
    console.log(userOrder);

    return {
      data,
      userOrder,
    };
  },
};
</script>

<template>
  <div class="orderView">
    <!-- 头部 -->
    <div class="top_bg">
      <router-link to="/myOrder" class="back">
        <span class="iconfont icon-arrow-left"></span>
      </router-link>

      <div class="order_num">
        <div class="num">{{ userOrder.order_state }}</div>
        <div class="intro">订单号</div>
      </div>

      <div class="tell">{{ userOrder.orderId }}</div>

      <div class="pic">
        <i
          class="iconfont icon-box-parcel-package-delivery-pack-office-facd"
        ></i>
      </div>
    </div>
    <!-- 头部 -->

    <!-- 地址 -->
    <div class="address">
      <div class="top">
        <span class="iconfont icon-fuwumendian"></span>
        <p class="name">
          {{ userOrder.address_default.name }}
        </p>
        <p class="tel">
          {{ userOrder.address_default.tel }}
        </p>
      </div>

      <div class="bottom">
        <p class="txt-cut">
          {{
            userOrder.address_default.province +
            userOrder.address_default.city +
            userOrder.address_default.county +
            userOrder.address_default.addressDetail
          }}
        </p>
      </div>
    </div>

    <!-- 订单列表 -->
    <ul class="lists">
      <li class="lis" v-for="item in userOrder.shopList" :key="item.id">
        <div class="left">
          <div class="img"><img :src="item.imgUrl" alt="" /></div>
          <div class="info">
            <h3>{{ item.title }}</h3>
            <div class="sum">
              ×<span>{{ item.num }}</span>
            </div>
          </div>
        </div>
        <div class="price">
          <span class="one">￥</span>{{ item.num * item.price }}
        </div>
      </li>
    </ul>
    <!-- 订单列表 -->

    <!-- 优惠减免 -->
    <div class="sub">
      <h2>优惠减免合计</h2>
      <div class="sub_num">
        <span>-￥</span>
        {{ userOrder.reduce_num == null ? 0 : userOrder.reduce_num }}
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="pay_num">
      <div class="pay">使用优惠券</div>
      <div class="right">
        <div class="topay">
          <span class="checked_coupon">{{
            userOrder.checked_coupon == null
              ? "暂无使用"
              : userOrder.checked_coupon.title
          }}</span>
        </div>
      </div>
    </div>

    <!-- 支付 -->
    <div class="pay_num">
      <div class="pay">共<span>2</span>件商品</div>
      <div class="right">
        <h5>
          共优惠<span
            >￥
            {{ userOrder.reduce_num == null ? 0 : userOrder.reduce_num }}</span
          >
        </h5>
        <div class="topay">
          实付￥<span>{{ userOrder.allPrice }}</span>
        </div>
      </div>
    </div>

    <!-- 发票 -->
    <div class="bill">
      <div class="title">发票信息</div>
      <div class="bill_info">
        <p>订单完成后可开具电子发票</p>
        <p>开票金额仅为实付金额， 红包，优惠、等</p>
        <p>支付部分不在开票范围内</p>
      </div>
    </div>

    <div class="order">
      <div class="title">订单信息</div>
      <div class="order_num">
        <div class="left">订单号</div>
        <div class="right">
          <div class="num">{{ userOrder.orderId }}</div>
          <div class="add">+</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.orderView {
  .top_bg {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 50px 0 30px;
    width: 100%;
    background: linear-gradient(320deg, #e8e8e8 20%, #fff);

    .back {
      position: absolute;
      top: 10px;

      height: 30px;
      line-height: 30px;
      width: 60px;

      background: #fff;
      box-shadow: 3px 3px 8px 3px #f0f0f0;

      border-top-right-radius: 13px;
      border-bottom-right-radius: 13px;

      .icon-arrow-left {
        font-size: 15px;
        color: #333;
        font-weight: 600;
        margin-left: 30px;
      }
    }

    .order_num {
      display: flex;
      align-items: center;

      .num {
        font-size: 24px;
        color: #222121;
        font-weight: 800;
        // padding: 0 15px ;
        padding-left: 15px;
      }

      .intro {
        background-color: #726dfa;
        width: 50px;
        height: 25px;
        font-size: 10px;
        text-align: center;
        line-height: 25px;
        scale: 0.8;
        color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }

    .tell {
      font-size: 14px;
      margin-left: 15px;
      font-weight: 600;
      height: 38px;
      line-height: 38px;
    }

    .pic {
      position: absolute;
      top: 30px;
      right: 20px;

      > i {
        font-size: 100px;
      }
    }
  }

  // # 地址
  > .address {
    margin-top: 22px;
    margin-left: 15px;
    position: relative;

    > .top {
      display: flex;
      align-items: center;

      margin-bottom: 10px;

      font-size: 18px;
      line-height: 18px;
      color: #0d0d0d;
      font-weight: 700;

      > .not_address {
        font-size: 14px;
        > i {
          font-size: 14px;
        }
      }

      > .tel {
        font-size: 16px;
        margin-left: 5px;
      }

      > span {
        padding-right: 5px;
      }
    }

    > .bottom {
      width: 70%;
      display: flex;
      align-items: center;
      margin-left: 20px;

      font-size: 16px;
      line-height: 22px;
      font-weight: bold;
    }
  }

  // # 订单列表
  .lists {
    padding-top: 20px;

    .lis {
      margin: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;

      .left {
        display: flex;
        justify-content: space-between;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 8px;
          img {
            width: 70px;
            height: 70px;
          }
        }

        .info {
          flex: 1;

          h3 {
            font-size: 15px;
            color: #222222;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            overflow: hidden;
            margin-bottom: 10px;
          }

          .sum {
            color: #9e9ea3;
          }
        }
      }

      .price {
        margin-top: 45px;
        font-size: 15px;
        font-weight: 700;
        flex-shrink: 0;

        span.one {
          display: inline-block;
          font-size: 10px;
          scale: 0.9;
          color: #000000;
        }
      }
    }
  }

  // # 优惠减免
  > .sub {
    padding: 0 15px;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(241, 237, 237);

    h2 {
      font-size: 13px;
      color: #a5a4a9;
      font-weight: 700;
    }

    .sub_num {
      font-weight: 700;
      color: #000000;
      span {
        display: inline-block;
        font-size: 10px;
        scale: 0.9;
        color: #000000;
      }
    }
  }

  // # 支付
  > .pay_num {
    height: 56px;
    line-height: 56px;

    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid rgb(241, 237, 237);

    i.del {
      transform: rotate(45deg);
    }

    .checked_coupon {
      color: #3bdca6;
      margin-right: 5px;
    }

    .pay {
      font-size: 13px;
      line-height: 13px;
      color: #a5a4a9;
      font-weight: 700;
    }

    .right {
      display: flex;
      font-size: 13px;
      line-height: 20px;
      color: #1f1f1f;
      font-weight: 700;

      h5 {
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
        margin-right: 10px;

        span {
          color: #3bdca6;
        }
      }

      .topay {
        display: flex;

        .allPrice {
          font-size: 18px;
        }
      }
    }
  }

  // # 发票
  .bill {
    padding: 0 15px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(241, 237, 237);

    .title {
      color: #000000;
      font-size: 18px;
      font-weight: 700;
    }
    .bill_info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 12px;
      color: #c3c3c3;
    }
  }

  // # 订单信息
  .order {
    padding: 0 15px;

    .title {
      color: #000000;
      font-size: 18px;
      font-weight: 700;
      height: 65px;
      line-height: 65px;
    }
    .order_num {
      display: flex;
      justify-content: space-between;
      padding-bottom: 40px;
      .left {
        font-size: 13px;
        color: #a5a4a9;
        font-weight: 700;
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        .add {
          margin-left: 5px;
          border: 2px solid #000;
          width: 12px;
          height: 12px;
          text-align: center;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>